<template>
	<view class="box">
		<view class="list" v-if="newData.length > 0">
			<view class="demo" v-for="(item,index) of newData" :key="index" @click="goToPage(item)">
				<view class="time">{{$u.timeFrom((new Date(item.create_time)).getTime(),false)}}</view>
				<view class="content">
					<view class="title">{{item.title}}</view>
					<view class="desc">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			<view class="img f-w">
				<image src="https://jw.xzsw2021.com/static/client/icon_60@2x.png" mode=""></image>
			</view>
			<view class="f30">太低调了，没有消息通知</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserNewsListApi
	} from '@/api/user.js'

	export default {
		data() {
			return {
				newData: [], //消息列表
			}
		},
		created() {
			this.newsList()
		},
		methods: {
			newsList() {
				getUserNewsListApi().then(res => {
					this.newData = res.data
				}).catch(err => {})
			},
			goToPage(item) {
				if (uni.$u.trim(item.url)) {
					uni.switchTab({
						url: `/${uni.$u.trim(item.url)}`,
						fail: (err) => {
							uni.navigateTo({
								url: `/${uni.$u.trim(item.url)}`
							})
						}
					})
				}

			}

		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		.none {
			margin: 193rpx auto;
			text-align: center;
			color: #666;

			.img {
				width: 360rpx;
				height: 360rpx;
				margin: 0 auto 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.list {
			.demo {
				margin: 0 auto;
				width: 690rpx;

				.time {
					height: 94rpx;
					line-height: 94rpx;
					text-align: center;
					font-size: 28rpx;
					color: #666;
				}

				.content {
					padding: 0 30rpx 40rpx;
					overflow: hidden;
					background: #FFFFFF;
					border-radius: 20rpx;

					.title {
						margin: 36rpx 0;
						font-weight: 600;
					}

					.desc {
						font-size: 28rpx;
						line-height: 46rpx;
					}
				}
			}
		}
	}
</style>
